import React from 'react'
import style from './index.less'
import { Form, Input, Select, Button, DatePicker } from 'antd';
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import DateSearch from '../../../components/DateSearch/index'
import TableList from './component/TableList';

const FormItem = Form.Item
const Option = Select.Option
const RangePicker = Form.RangePicker
@Form.create()
@connect(({ money, loading }) => ({
    money,
    loading: loading.models.money,
}))
class moneyList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            pageSize: 1,
            str: [],
            type: 0,
            filter: {
                name: '',
                type: 0
            }
        }
    }
    onHandlePage = page => {
        this.setState({ pageSize: page })
        const { pageSize, filter } = this.state
        this.props.dispatch({
            type: "money/getMoneyList",
            payload: {
                ...filter,
                index: page
            }
        })
    }
    onChangeDate = str => {
        this.setState({ str })
    }
    onSearch = () => {
        this.setState({ pageSize: 1 })
        const { getFieldValue } = this.props.form
        const { pageSize, str } = this.state
        console.log("pageSize", pageSize)
        let name = getFieldValue("name") || undefined
        let start = '', end = ''
        let type = getFieldValue("type") || 0
        if (str.length) {
            start = str[0]
            end = str[1]
        }
        this.setState({
            filter: {
                name,
                start,
                end,
                type
            }
        })
        this.props.dispatch({
            type: "money/getMoneyList",
            payload: {
                name,
                start,
                end,
                type
            }
        })
    }
    selectChange = val => {
        this.setState()
        console.log('value', val)
    }

    render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const { money, loading } = this.props;
        const { RehargeItem } = money;
        const { pageSize } = this.state
        return (
            <div className={style.moneyList}>
                <Form layout='inline' style={{ marginBottom: '20px' }}>
                    <FormItem>
                        {getFieldDecorator('name')(
                            <Input size="large" placeholder="请输入会员名称">
                            </Input>
                        )
                        }
                    </FormItem>
                    <FormItem>
                        <DateSearch onChangeDate={this.onChangeDate} />
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('type', {
                            initialValue: "0"
                        })(
                            <Select size="large" placeholder="请选择币种" style={{ width: 120 }} onChange={this.selectChange}>
                                <Option value="0">消费金</Option>
                                <Option value="1">福利金</Option>
                                <Option value="2">积分</Option>
                                <Option value="3">礼券</Option>
                            </Select>
                        )
                        }
                    </FormItem>
                    <FormItem style={{ marginLeft: '150px' }}>
                        <Button type="primary" size="large" onClick={this.onSearch}>
                            搜索
                            </Button>
                    </FormItem>
                </Form>
                <div className={style.tablelist}>
                    <TableList RehargeItem={RehargeItem} page={pageSize}
                        loading={loading} onHandlePage={this.onHandlePage} />
                </div>
            </div>)
    }

}
export default moneyList